<template>
  <view class="coupon-window {{window==true?&quot;on&quot;:&quot;&quot;}}">
    <view class="couponWinList">
      <view class="item acea-row row-between-wrapper" wx:for="{{couponList}}" wx:key>
        <view class="money font-color">￥<text class="num">{{ item.discount }}</text></view>
        <view class="text">
          <view class="name">【{{ item.desc }}】购物买{{ item.min }}减{{ item.discount }}</view>
          <view wx:if="{{item.days != 0}}">有效期：{{ item.days }}天</view>
          <view wx:else>{{ item.startTime }}-{{ item.endTime }}</view>
        </view>
      </view>
    </view>
    <view class="lid">
      <view hover-class="none" bindtap="getAllCoupon" class="bnt font-color">立即领取</view>
      <view class="iconfont icon-guanbi3" bindtap="close" />
    </view>
  </view>
  <view class="mask" catchtouchmove="true" hidden="{{window==false}}" />
</template>

<style lang="scss" scoped>
.coupon-window{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:630rpx;height:649rpx;position:fixed;top:20%;z-index:99;left:50%;margin-left:-305rpx;transform:translate3d(0,-200%,0);transition:all .3s cubic-bezier(.25,.5,.5,.9);}
.coupon-window.on{transform:translate3d(0,0,0);}
.coupon-window .couponWinList{width:480rpx;margin:157rpx 0 0 60rpx;height:415rpx;overflow:auto;}
.coupon-window .couponWinList .item{width:100%;height:120rpx;background-color:#fff;position:relative;margin-bottom:17rpx;}
.coupon-window .couponWinList .item::after{content:'';position: absolute;width:18rpx;height: 18rpx;border-radius: 50%;background-color: #f2443a;left:25.5%;bottom:0;margin-bottom:-9rpx;}
.coupon-window .couponWinList .item::before{content:'';position: absolute;width:18rpx;height: 18rpx;border-radius: 50%;background-color: #f2443a;left:25.5%;top:0;margin-top:-9rpx;}
.coupon-window .couponWinList .item .money{width:130rpx;border-right:1px dashed #ddd;height:100%;text-align:center;line-height:120rpx;font-size:26rpx;font-weight:bold;}
.coupon-window .couponWinList .item .money .num{font-size:40rpx;color: #e00;}
.coupon-window .couponWinList .item .text{width:349rpx;font-size:22rpx;color:#999;padding:0 10rpx;box-sizing:border-box;}
.coupon-window .couponWinList .item .text .name{font-size:24rpx;color:#282828;font-weight:bold;margin-bottom:9rpx;}
.coupon-window .lid{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:573rpx;height:224rpx;position:fixed;left:50%;top:20%;margin:424rpx 0 0 -296rpx;}
.coupon-window .lid .bnt{font-size:29rpx;width:440rpx;height:80rpx;border-radius:40rpx;background-color:#f9f1d3;text-align:center;line-height:80rpx;font-weight:bold;margin:98rpx auto 0 auto;}
.coupon-window .lid .iconfont{color:#fff;font-size:60rpx;text-align:center;margin-top:87rpx;}
</style>
